import 'package:flutter/material.dart';
import 'package:multi_clickable_shape_widget/widget/ColorPickerDialog.dart';
import 'package:multi_clickable_shape_widget/widget/LineBean.dart';
import 'package:multi_clickable_shape_widget/widget/ShapeController.dart';
import 'package:multi_clickable_shape_widget/widget/constant.dart';
import 'package:multi_clickable_shape_widget/widget/edit_dialog.dart';

class MultiClickableShapeEditWidget extends StatefulWidget {
  final MultiClickableShapeController controller;
  const MultiClickableShapeEditWidget({super.key, required this.controller});

  @override
  State<StatefulWidget> createState() => MultiClickableShapeEditWidgetState();
}

class MultiClickableShapeEditWidgetState
    extends State<MultiClickableShapeEditWidget> {
  @override
  void initState() {
    super.initState();
    widget.controller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white, boxShadow: bs),
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("组件模式"),
              Switch(
                value: widget.controller.isEdit,
                onChanged: (a) {
                  widget.controller.isEdit = a;
                },
              ),
              Text("编辑模式"),
            ],
          ),
          widget.controller.isEdit
              ? SizedBox(
                  height: MediaQuery.of(context).size.height * 0.3,
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        GestureDetector(
                          onTap: () async {
                            widget.controller.setBgColor(
                              await showColorPicker(
                                    context,
                                    widget.controller.bgColor,
                                  ) ??
                                  widget.controller.bgColor,
                            );
                          },
                          child: Padding(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 10,
                              vertical: 5,
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text("背景颜色"),
                                Container(
                                  color: widget.controller.bgColor,
                                  width: 40,
                                  height: 40,
                                ),
                              ],
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "组件宽:${widget.controller.width.toStringAsFixed(2)}",
                              ),
                              Expanded(
                                child: Slider(
                                  min: 0,
                                  padding: EdgeInsets.symmetric(horizontal: 10),
                                  max: MediaQuery.of(context).size.width,
                                  value: widget.controller.width,
                                  onChanged: (t) {
                                    widget.controller.width = t;
                                  },
                                ),
                              ),
                              GestureDetector(
                                onTap: () async {
                                  double? res = double.tryParse(
                                    '${await showEditDialog(context, "请输入内容")}',
                                  );
                                  if (res != null) {
                                    widget.controller.width = res;
                                  }
                                },
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Icon(Icons.edit_note_outlined),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 10),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "组件高:${widget.controller.height.toStringAsFixed(2)}",
                              ),
                              Expanded(
                                child: Slider(
                                  min: 0,
                                  max: MediaQuery.of(context).size.width,
                                  padding: EdgeInsets.symmetric(horizontal: 10),
                                  value: widget.controller.height,
                                  onChanged: (t) {
                                    widget.controller.height = t;
                                  },
                                ),
                              ),
                              GestureDetector(
                                onTap: () async {
                                  double? res = double.tryParse(
                                    '${await showEditDialog(context, "请输入内容")}',
                                  );
                                  if (res != null) {
                                    widget.controller.height = res;
                                  }
                                },
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Icon(Icons.edit_note_outlined),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 10),
                        IntrinsicHeight(
                          child: Row(
                            children: [
                              Expanded(
                                child: Builder(
                                  builder: (context) {
                                    if (widget.controller.lines.isEmpty) {
                                      return Padding(
                                        padding: const EdgeInsets.only(
                                          left: 15,
                                        ),
                                        child: Text("请添加路径"),
                                      );
                                    }
                                    return SingleChildScrollView(
                                      scrollDirection: Axis.horizontal,
                                      child: Row(
                                        children: List.generate(
                                          widget.controller.lines.length,
                                          (i) {
                                            return GestureDetector(
                                              onTap: () {
                                                widget
                                                        .controller
                                                        .selectPathIndex =
                                                    i;
                                                widget.controller.selectDot = 0;
                                              },
                                              child: Container(
                                                padding: EdgeInsets.symmetric(
                                                  vertical: 15,
                                                  horizontal: 20,
                                                ),
                                                decoration: BoxDecoration(
                                                  color:
                                                      widget
                                                              .controller
                                                              .selectPathIndex ==
                                                          i
                                                      ? Colors.blue
                                                      : Colors.blue.withAlpha(
                                                          100,
                                                        ),
                                                ),
                                                child: Text(
                                                  "路径${i + 1}",
                                                  style: TextStyle(
                                                    color:
                                                        widget
                                                                .controller
                                                                .selectPathIndex ==
                                                            i
                                                        ? Colors.white
                                                        : null,
                                                  ),
                                                ),
                                              ),
                                            );
                                          },
                                        ),
                                      ),
                                    );
                                  },
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  var bean = PathBean();
                                  bean.line = [
                                    Offset(0, 0),
                                    Offset(0, 100),
                                    Offset(100, 0),
                                  ];
                                  widget.controller.selectDot = 0;
                                  widget.controller.addLine(bean);
                                },
                                child: Container(
                                  padding: EdgeInsets.all(10),
                                  decoration: BoxDecoration(color: Colors.blue),
                                  child: Center(
                                    child: Icon(Icons.add, color: Colors.white),
                                  ),
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  widget.controller.removePath();
                                },
                                child: Container(
                                  padding: EdgeInsets.all(10),
                                  decoration: BoxDecoration(color: Colors.red),
                                  child: Center(
                                    child: Icon(
                                      Icons.remove,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 5),
                        widget.controller.lines.isEmpty
                            ? Container()
                            : Padding(
                                padding: const EdgeInsets.symmetric(
                                  vertical: 5,
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        widget.controller.moveToLast();
                                      },
                                      child: Container(
                                        padding: EdgeInsets.symmetric(
                                          horizontal: 25,
                                          vertical: 15,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Colors.blue,
                                        ),
                                        child: Text(
                                          "路径前移",
                                          style: TextStyle(color: Colors.white),
                                        ),
                                      ),
                                    ),
                                    GestureDetector(
                                      onTap: () {
                                        widget.controller.moveToBackward();
                                      },
                                      child: Container(
                                        padding: EdgeInsets.symmetric(
                                          horizontal: 25,
                                          vertical: 15,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Colors.blue,
                                        ),
                                        child: Text(
                                          "路径后移",
                                          style: TextStyle(color: Colors.white),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                        SizedBox(height: 5),
                        widget.controller.lines.isEmpty
                            ? Container()
                            : IntrinsicHeight(
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: SingleChildScrollView(
                                        scrollDirection: Axis.horizontal,
                                        child: Builder(
                                          builder: (c) {
                                            if (widget
                                                .controller
                                                .lines
                                                .isEmpty) {
                                              return Container();
                                            }
                                            if (widget
                                                .controller
                                                .currentLine
                                                .isEmpty) {
                                              return Container();
                                            }
                                            var list =
                                                widget.controller.currentLine;
                                            return Row(
                                              children: List.generate(list.length, (
                                                i,
                                              ) {
                                                return GestureDetector(
                                                  onTap: () {
                                                    widget
                                                            .controller
                                                            .selectDot =
                                                        i;
                                                  },
                                                  child: Container(
                                                    padding:
                                                        EdgeInsets.symmetric(
                                                          vertical: 15,
                                                          horizontal: 20,
                                                        ),
                                                    decoration: BoxDecoration(
                                                      color:
                                                          widget
                                                                  .controller
                                                                  .selectDot ==
                                                              i
                                                          ? Colors.blue
                                                          : Colors.blue
                                                                .withAlpha(100),
                                                    ),
                                                    child: Text(
                                                      "点${i + 1}",
                                                      style: TextStyle(
                                                        color:
                                                            widget
                                                                    .controller
                                                                    .selectDot ==
                                                                i
                                                            ? Colors.white
                                                            : null,
                                                      ),
                                                    ),
                                                  ),
                                                );
                                              }),
                                            );
                                          },
                                        ),
                                      ),
                                    ),
                                    GestureDetector(
                                      onTap: () {
                                        widget.controller.addDot(
                                          Offset(100, 100),
                                        );
                                      },
                                      child: Container(
                                        padding: EdgeInsets.all(10),
                                        decoration: BoxDecoration(
                                          color: Colors.blue,
                                        ),
                                        child: Center(
                                          child: Icon(
                                            Icons.add,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ),
                                    GestureDetector(
                                      onTap: widget.controller.removeCurrentDot,
                                      child: Container(
                                        padding: EdgeInsets.all(10),
                                        decoration: BoxDecoration(
                                          color: Colors.red,
                                        ),
                                        child: Center(
                                          child: Icon(
                                            Icons.remove,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                        Builder(
                          builder: (c) {
                            if (widget.controller.selectPathIndex == -1 ||
                                widget.controller.selectDot == -1) {
                              return Container();
                            }
                            if (widget.controller.lines.isEmpty) {
                              return Container();
                            }
                            if (widget.controller.currentLine.isEmpty) {
                              return Container();
                            }
                            PathBean bean = widget.controller.currentPath;
                            var dot = widget.controller.currentDot;
                            return Container(
                              padding: EdgeInsets.all(10),
                              margin: EdgeInsets.symmetric(
                                vertical: 10,
                                horizontal: 10,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: br5,
                                boxShadow: bs,
                              ),
                              child: Column(
                                children: [
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text("X:${dot.dx.toStringAsFixed(2)}"),
                                      Row(
                                        children: [
                                          GestureDetector(
                                            onTap: () {
                                              widget.controller.currentY =
                                                  dot.dx - 1;
                                            },
                                            child: Container(
                                              decoration: BoxDecoration(
                                                border: Border.all(
                                                  color: Colors.grey,
                                                ),
                                                borderRadius: br5,
                                              ),
                                              padding: const EdgeInsets.all(
                                                8.0,
                                              ),
                                              child: Icon(Icons.remove),
                                            ),
                                          ),
                                          SizedBox(width: 10),
                                          GestureDetector(
                                            onTap: () {
                                              widget.controller.currentX =
                                                  dot.dx + 1;
                                            },
                                            child: Container(
                                              decoration: BoxDecoration(
                                                border: Border.all(
                                                  color: Colors.grey,
                                                ),
                                                borderRadius: br5,
                                              ),
                                              padding: const EdgeInsets.all(
                                                8.0,
                                              ),
                                              child: Icon(Icons.add),
                                            ),
                                          ),
                                          SizedBox(width: 10),
                                          GestureDetector(
                                            onTap: () async {
                                              double? res = double.tryParse(
                                                '${await showEditDialog(context, "请输入内容")}',
                                              );
                                              if (res != null) {
                                                widget.controller.currentX =
                                                    res;
                                              }
                                            },
                                            child: Padding(
                                              padding: const EdgeInsets.all(
                                                8.0,
                                              ),
                                              child: Icon(
                                                Icons.edit_note_outlined,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                  SizedBox(height: 10),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Text(
                                          "Y:${dot.dy.toStringAsFixed(2)}",
                                        ),
                                      ),
                                      Row(
                                        children: [
                                          GestureDetector(
                                            onTap: () {
                                              widget.controller.currentY =
                                                  dot.dy - 1;
                                            },
                                            child: Container(
                                              decoration: BoxDecoration(
                                                border: Border.all(
                                                  color: Colors.grey,
                                                ),
                                                borderRadius: br5,
                                              ),
                                              padding: const EdgeInsets.all(
                                                8.0,
                                              ),
                                              child: Icon(Icons.remove),
                                            ),
                                          ),
                                          SizedBox(width: 10),
                                          GestureDetector(
                                            onTap: () {
                                              widget.controller.currentY =
                                                  dot.dy + 1;
                                            },
                                            child: Container(
                                              decoration: BoxDecoration(
                                                border: Border.all(
                                                  color: Colors.grey,
                                                ),
                                                borderRadius: br5,
                                              ),
                                              padding: const EdgeInsets.all(
                                                8.0,
                                              ),
                                              child: Icon(Icons.add),
                                            ),
                                          ),
                                          SizedBox(width: 10),
                                          GestureDetector(
                                            onTap: () async {
                                              double? res = double.tryParse(
                                                '${await showEditDialog(context, "请输入内容")}',
                                              );
                                              if (res != null) {
                                                widget.controller.currentY =
                                                    res;
                                              }
                                            },
                                            child: Padding(
                                              padding: const EdgeInsets.all(
                                                8.0,
                                              ),
                                              child: Icon(
                                                Icons.edit_note_outlined,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                  SizedBox(height: 10),
                                  GestureDetector(
                                    onTap: () async {
                                      widget.controller.setColor(
                                        await showColorPicker(
                                              context,
                                              bean.color,
                                            ) ??
                                            bean.color,
                                      );
                                    },
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(
                                        horizontal: 10,
                                        vertical: 5,
                                      ),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text("填充颜色"),
                                          Container(
                                            color: bean.color,
                                            width: 40,
                                            height: 40,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: 10),
                                  GestureDetector(
                                    onTap: () {
                                      print(widget.controller.getParams);
                                    },
                                    child: Container(
                                      padding: EdgeInsets.symmetric(
                                        vertical: 15,
                                      ),
                                      decoration: BoxDecoration(
                                        color: Colors.blue,
                                      ),
                                      child: Center(
                                        child: Text(
                                          "获取参数",
                                          style: TextStyle(color: Colors.white),
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: 10),
                                ],
                              ),
                            );
                          },
                        ),
                      ],
                    ),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}
